<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/bootstrap.css">
  <link rel="stylesheet" href="../css/bootstrap-icons.css">
  <script src="../js/bootstrap.bundle.js"></script>
  <title>响应式项目</title>
  <style>
    .zdy-card .zdy-mark{
      transition: 2s;
    }
    .zdy-card:hover .zdy-mark{
      top:0 !important;
    }
  </style>
</head>
<body>
  <!-- 第一部分.zdy-navber 自定义的最外层包裹元素 -->
  <div class="zdy-navber bg-primary">
    <div class="container">
      <!-- 把navbar包在container里了 -->
      <!-- navbar响应式导航条
      .navbar 基础类flex布局
      .navbar-expand-sm 大小菜单切换的断点,指在什么范围以下小菜单出现,在什么范围以上大菜单显示
      .navbar-dark 深色背景浅色字 .navbar-light 浅色背景深色字
      -->
      <div class="navbar navbar-expand-md navbar-dark">
        <!--logo
        标签要求:logo一般点击会回到首页,所以"尽量"使用a标签
        .navbar-brand 专门渲染a标签的logo
        -->
        <a href="#" class="navbar-brand">Logo</a>
        <!-- 小菜单(菜单隐藏显示的按钮)
        .navbar-toggler小菜单样式
        .border-2 .border-light 可加可不加的样式,美化小菜单
        [data-="" data-* data是自定义属性*可自己写如:data-aa]
        data-bs-toggle="collapse" 负责折叠的属性
        data-bs-target="#menu" 目标是大菜单的id
        -->
        <button class="navbar-toggler border-2 border-light" data-bs-toggle="collapse" data-bs-target="#menu">
          <!-- navbar-toggler-icon 小菜单的横线 -->
          <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 大菜单 [大小菜单的位置不能更换,因为js用小菜单控制的它的下一个兄弟元素]
          .collapse 负责消失(重要)
          .navbar-collapse 导航条中的项目样式
          id属性:让小菜单的按钮关联大菜单
        -->
        <div class="collapse navbar-collapse justify-content-end" id="menu">
          <!-- 我想在大菜单里放一个导航 nav
          .navbar-nav navbar里的导航 flex布局
          .nav-item 导航项
          .nav-link 导航中的连接标签颜色和格式
          -->
          <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">首页</a></li>
            <li class="nav-item"><a href="#wm" class="nav-link">关于我们</a></li>
            <li class="nav-item">
              <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" >服务项目</button>
                <ul class="dropdown-menu">
                  <li><a href="" class="dropdown-item">洗车</a></li>
                  <li><a href="" class="dropdown-item">贴膜</a></li>
                  <li><a href="" class="dropdown-item">导航</a></li>
                  <li><a href="" class="dropdown-item">座椅</a></li>
                </ul>
              </div>
            </li>
            <li class="nav-item"><a href="#rm" class="nav-link">热门推荐</a></li>
            <li class="nav-item"><a href="#" class="nav-link">联系我们</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div> 
  <!-- 第二部分.zdy-jumu 自定义的剧目 -->
  <div class="zdy-jumu bg-primary text-center text-light py-lg-5 py-md-4 py-sm-3 py-2">
    <div class="container">
      <div class="display-3 mb-3">Kevin Petter</div>
      <h2>I am UI/Ux Des</h2>
      <p class="w-75 mx-auto my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi quia dicta incidunt non officiis ducimus autem, ullam quidem perferendis in impedit vero voluptatibus magnam accusamus voluptates eligendi alias voluptate. Molestiae.</p>
      <button class="btn btn-lg btn-outline-light  mb-3">VIEW MY WORK</button>
    </div>
  </div> 
  <!-- 第三部分 关于我们 自定义zdy-skill -->
  <div class="zdy-skill">
    <div class="container">
      <!-- 结构上分为两块 -->
      <div class="text-center">
        <h2 class="py-5" id="wm">关于我们</h2>
        <p class="pb-5">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto, illum! Obcaecati, repellendus distinctio velit, nulla consequatur doloribus minus laudantium minima alias omnis dolores nam consequuntur! Sapiente optio tenetur illo tempore?</p>
      </div>
      <!-- 下面部分是栅格布局 md的时候切换成上下布局 -->
      <div class="row">
        <!-- 左侧是图的列 lg以上5份 lg以下12份 -->
        <div class="col-lg-5 col-12 bg-black">
          <!-- .d-block 把图片变成块级，可以去掉随身的幽灵空白节点 -->
          <img class="w-100" src="../img/1.jpg" alt="">
        </div>
        <!-- 右侧是进度条 lg以上7份 lg以下12份-->
        <div class="col-lg-7 col-12">
          <h3 class="py-3">是钱多多的票</h3>
          <!--.list-unstyled 去掉列表标签的标识符和左右内间距 -->
          <ul class="list-unstyled">
            <li class="my-lg-5 my-1">
              <h5>HTML5</h5>
              <!-- 进度条
                .progress 进度条的父级
                .progress-bar 进度条内部颜色是flex
                .progress-bar-striped 进度bar的条形纹
                .progress-bar-animated 动画效果
                style属性中可以设置外层进度条高度，内层进度bar的宽度
              -->
              <div class="progress" style="height: 30px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 98%;" ></div>
              </div>
            </li>
            <li class="my-lg-5 my-1">
              <h5>CSS</h5>
              <div class="progress" style="height: 30px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%;"></div>
              </div>
            </li>
            <li class="my-lg-5 my-1">
              <h5>JavaScript</h5>
              <div class="progress" style="height: 30px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 60%;"></div>
              </div>
            </li>
            <li class="my-lg-5 my-1">
              <h5>Bootstrap</h5>
              <div class="progress" style="height: 30px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width:70%;"></div>
              </div>
            </li>
            <li class="my-lg-5 my-1">
              <h5>Node.js</h5>
              <div class="progress" style="height: 30px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 85%;"></div>
              </div>
            </li>
          </ul>
          <!-- 图标部分
            使用boot提供的官方图标库需要引入bootstrap-icons.css文件
            根据文档https://icons.bootscss.com/#usage  选择需要的图标
            图标就是文字可以使用文字的属性进行修改
          -->
          <div class="display-6 text-primary my-5 w-75 mx-auto d-flex justify-content-evenly">
            <span class="bi-github"></span>
            <span class="bi-bootstrap"></span>
            <span class="bi-facebook"></span>
            <span class="bi-google"></span>
            <span class="bi-twitch"></span>
            <span class="bi-xbox"></span>
          </div>
          <button class="btn btn-primary w-50" type="button">查看详情</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 第四部分 服务项目 -->
  <div class="zdy-gird">
    <div class="container">
      <!-- 结构上分为两块 -->
      <div class="text-center">
        <h2 class="py-5 my-5" id="fw">服务项目</h2>
        <p class="pb-5">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto, illum! Obcaecati, repellendus distinctio velit, nulla consequatur doloribus minus laudantium minima alias omnis dolores nam consequuntur! Sapiente optio tenetur illo tempore?</p>
      </div>
      <!-- 下方结构 -->
      <div class="row">
        <!-- 
          .col-md-4  md以上一行3块一块4份
          .col-sm-6  sm以上一行2块一块6份
          .col-12  sm以上一行1块一块12份
        -->
        <div class="col-md-4 col-sm-6 col-12 text-center py-4">
          <span class="bi-github display-6 text-primary"></span>
          <h4 class="my-3">UI/Ux Design</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem temporibus rem dignissimos labore necessitatibus cum sequi .</p>
        </div>
        <div class="col-md-4 col-sm-6 col-12 text-center py-4">
          <span class="bi-github display-6 text-primary"></span>
          <h4 class="my-3">Web Development</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem temporibus rem dignissimos labore necessitatibus cum sequi .</p>
        </div>
        <div class="col-md-4 col-sm-6 col-12 text-center py-4">
          <span class="bi-film display-6 text-primary"></span>
          <h4 class="my-3">Btsmding</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem temporibus rem dignissimos labore necessitatibus cum sequi .</p>
        </div>
        <div class="col-md-4 col-sm-6 col-12 text-center py-4">
          <span class="bi-github display-6 text-primary"></span>
          <h4 class="my-3">Photogrsphy</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem temporibus rem dignissimos labore necessitatibus cum sequi .</p>
        </div>
        <div class="col-md-4 col-sm-6 col-12 text-center py-4">
          <span class="bi-umbrella display-6 text-primary"></span>
          <h4 class="my-3">Apps Development</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem temporibus rem dignissimos labore necessitatibus cum sequi .</p>
        </div>
        <div class="col-md-4 col-sm-6 col-12 text-center py-4">
          <span class="bi-pin-map display-6  text-primary"></span>
          <h4 class="my-3">Digital Marketing</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem temporibus rem dignissimos labore necessitatibus cum sequi .</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 第五部分 热门推荐 -->
  <div class="zdy-navtab">
    <div class="container">
      <h2 class="text-center my-lg-5 py-lg-5 my-3" id="rm">热门推荐</h2>
      <!-- navtab tab切换面板 
        .nav 导航的基础类 flex布局
        .nav-tabs 只有一个样式边框，但还是要写为了里面的样式
        .nav-link  导航中可点击的项目，有样式
        . justify-content-evenly 元素间距左右两侧相等
        data-bs-toggle="tab" 这个属性是关联js的动作，动作是什么就在值里写，如tab指的是tab面板的切换
        data-bs-target="#a"使用js控制的对应的目标元素
      -->
      <ul class="nav nav-tabs justify-content-evenly">
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#a">案例一</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#b">案例二</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#c">案例三</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#d">案例四</button></li>
      </ul>
      <!-- 展示区 
        .tab-content 基础类没样式，主要作用于祖先选择器使用
        .tab-pane 隐藏元素
        .active  显示元素
        id属性关联控制区域的按钮
        .fade 和 .show  是一个透明度的过渡效果可加可不加
      -->
      <div class="tab-content">
        <!-- 案例1 -->
        <div class="tab-pane fade show active" id="a">
          <div class="row">
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/001.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/002.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/003.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/004.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/005.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/006.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 案例2 -->
        <div class="tab-pane fade" id="b">
          <div class="row">
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/007.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/008.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/009.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/010.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/011.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/012.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 案例3 -->
        <div class="tab-pane fade" id="c">
          <div class="row">
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/013.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/014.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/015.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/016.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/017.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/018.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 案例4 -->
        <div class="tab-pane fade" id="d">
          <div class="row">
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/019.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/020.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/021.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/022.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/023.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12 mt-2 px-4">
              <div class="card zdy-card mx-auto position-relative overflow-hidden">
                <!-- 卡的遮罩
                  必须要定位---绝对定位，上层父级相对定位
                  .opacity-50  元素半透明
                  .bg-opactity-50 背景色半透明
                  .overflow-hidden  溢出隐藏
                -->
                <div class="zdy-mark text-center  position-absolute bg-primary top-100 w-100 h-100 rounded-2 bg-opacity-50 text-white">点击查看</div>
                <!-- 卡里的图 -->
                <img src="../img/poke/024.png" class="card-img-top w-75 mx-auto" alt="...">
                <!-- 卡里的文 -->
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 第六部分 轮播图 -->
  <div class="zdy-carousel">
    <!-- 轮播图
      .carousel 轮播图的父级基础类  相对定位
      data-bs-ride="carousel" 轮播图的定时器
      data-bs-interval="1000"  控制时间 1000毫秒
      .slide 平滑的位移类
    -->
    <div class="carousel slide" id="f6" data-bs-ride="carousel" data-bs-interval="2000">
      <!-- 图片展示区
        .carousel-inner 轮播图片展示区的外层 相对定位和溢出隐藏
        .carousel-item 图片组
      -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="../img/banner1.jpg" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="../img/banner2.jpg" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="../img/banner3.jpg" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="../img/banner4.jpg" class="d-block w-100">
        </div>
      </div>
      <!-- 控制符区
        .carousel-indicators 控制符区的样式 flex 定位..
      -->
      <div class="carousel-indicators">
        <!-- 每个控制符
          .ata-bs-slide=""  控制符控制切换到当前图片 从0位开始
          .active 默认当前项[boot5里必须加]控制符的active，没有特殊说明必须加，但是轮播图的控制符中还是要求必须加入默认控制符
          注意事项，如果一个css类没加但控制台报错，该类一定是js控制的
          data-bs-target="#f6" 关联整个轮播图的最顶级元素的id
        -->
        <button data-bs-slide-to="0" data-bs-target="#f6" class="active"></button>
        <button data-bs-slide-to="1" data-bs-target="#f6"></button>
        <button data-bs-slide-to="2" data-bs-target="#f6"></button>
        <button data-bs-slide-to="3" data-bs-target="#f6"></button>
      </div>
      <!-- 左右按钮 -->
      <!-- 左按钮
        .carousel-control-prev 上一个只有一个left定位的位置
        .carousel-control-prev-icon  向左的小箭头
        data-bs-target="f6" 关联外层父级
        data-bs-slide="prev" js关联上一个图片位置
      -->
      <button class="carousel-control-prev" data-bs-target="#f6" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <!-- 右按钮
        .carousel-control-next 下一个只有一个right定位的位置
        .carousel-control-prev-next  向右的小箭头
        data-bs-slide="next" js关联下一个图片位置
      -->
      <button class="carousel-control-next" data-bs-target="#f6"  data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </div>
  <!-- 第七部分 联系我们 -->
  <div class="zdy-lianxi">
    <div class="container">
      <!-- 结构上分为两块 -->
      <div class="text-center">
        <h2 class="my-lg-5 py-lg-5 my-3" id="fw">联系我们</h2>
        <p class="pb-5">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto, illum! Obcaecati, repellendus distinctio velit, nulla consequatur doloribus minus laudantium minima alias omnis dolores nam consequuntur! Sapiente optio tenetur illo tempore?</p>
      </div>
      <!-- 下方结构 -->
      <ul class="row text-center list-unstyled">
        <li class=" col-4 position-relative">
          <div class="rounded-circle bg-primary mx-auto" style="width: 80px; height: 80px;">
            <span class="bi-geo-alt  w-100 h-100 display-4 text-white"></span>
          </div>
          <p class="mt-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </li>
        <li class=" col-4 ">
          <div class="rounded-circle bg-primary mx-auto" style="width: 80px; height: 80px;">
            <span class="bi-telephone  w-100 h-100 display-4 text-white"></span>
          </div>
          <p class="mt-3">付先生：187****0000<br>付女士：150****0000</p>
        </li>
        <li class=" col-4 ">
          <div class="rounded-circle bg-primary mx-auto" style="width: 80px; height: 80px;">
            <span class="bi-envelope  w-100 h-100 display-4 text-white"></span>
          </div>
          <p class="mt-3">邮箱：100000000@qq.com</p>
        </li>
      </ul>
      <!-- 表单区 -->
      <div>
        <input type="text" placeholder="name" class="form-control">
        <input type="text" placeholder="email" class="form-control my-4">
        <textarea class="form-control" rows="10"></textarea>
        <button class="btn btn-outline-secondary mt-4 ">submit</button>
      </div>
    </div>
  </div>
</body>
</html>